import { FirstHeaderC, NestedTableC } from '../../components';
import { useEffect, useState } from 'react';
import { useVT } from 'virtualizedtableforantd4';

const columns = [
  { title: '姓名', key: 'name' },
  { title: '年龄', key: 'age' },
  { title: '身高', key: 'height' },
  { title: '体重', key: 'weight' },
  { title: '年级', key: 'level123' },
  { title: 'aaa', key: 'level12' },
];
const bigData = [];
for (let i = 0; i < 4000; ++i) {
  bigData.push({
    key: i,
    name: i,
    age: `new${i}`,
    height: 100,
    weight: '10.3.4.5654',
    level: 100,
  });
}
const dataStatic = [];
for (let i = 0; i < 3000; ++i) {
  dataStatic.push({
    key: i,
    name: i,
    age: `new${i}`,
    height: 100,
    weight: '10.3.4.5654',
    level: 100,
    nestedConfig: {
      columns,
      dataSource: bigData,
      rowKey: 'key',
      bigTable: true,
    },
  });
}
const BigDatanestedTable = () => {
  const [data, setData] = useState([]);
  const [vt] = useVT(
    () => ({
      scroll: { y: 600 },
    }),
    [],
  );
  const initData = () => {
    const datas = [];
    for (let i = 0; i < 10; ++i) {
      datas.push({
        key: i,
        name: i,
        age: `new${i}`,
        height: 100,
        weight: '10.3.4.5654',
        level: 100,
      });
    }
    setData(datas);
  };
  useEffect(() => initData(), []);
  const onNestedExtend = (expanded, record) => {
    const dataSource = JSON.parse(JSON.stringify(data));
    const index = dataSource.findIndex((item) => item.key === record.key);
    if (index > -1 && expanded) {
      const nestedConfig = {
        columns,
        dataSource: bigData,
        rowKey: 'key',
        bigTable: true,
      };
      // 这里写逻辑，处理数据
      dataSource[index].loading = true;
      dataSource[index].nestedConfig = nestedConfig;
      setData(JSON.parse(JSON.stringify(dataSource)));
      setTimeout(() => {
        dataSource[index].loading = false;
        setData(JSON.parse(JSON.stringify(dataSource)));
      }, 2000);
    }
  };
  return (
    <>
      <FirstHeaderC title='嵌套的表格大数据' />
      <NestedTableC
        onExpand={onNestedExtend}
        hidePage={true}
        scroll={{ y: 600 }} // 必须设置滚动高度 这里y:500是确定了这个table的高度为500，加载完数据后，就展示500高度的数据，当向下滑动滚动条后，就开始加载后面的数据。这样就解决了table数据过多的性能问题了。
        columns={columns}
        dataSource={data}
        rowKey={'key'}
      />
      <FirstHeaderC title='顶层大数据/子级也大数据' />
      <NestedTableC
        bigTable={true}
        hidePage={true}
        scroll={{ y: 600 }} // 必须设置滚动高度 这里y:500是确定了这个table的高度为500，加载完数据后，就展示500高度的数据，当向下滑动滚动条后，就开始加载后面的数据。这样就解决了table数据过多的性能问题了。
        columns={columns}
        dataSource={dataStatic}
        rowKey={'key'}
      />
    </>
  );
};
export default BigDatanestedTable;
